import { resolve } from 'node:path'
import { defineConfig } from '@celi/boot/vite'
import Unocss from 'unocss/vite'

export default defineConfig({
  vite: {
    root: resolve('src/renderer'),
    plugins: [
      Unocss({
        mode: 'per-module',
        include: [/\.tsx$/],
        preprocess(matcher) {
          return matcher.startsWith('un-') ? matcher.slice(3) : undefined
        },
        theme: {
          colors: {
            primary: 'var(--primary-color)',
            info: 'var(--info-color)',
            success: 'var(--success-color)',
            warning: 'var(--warning-color)',
            error: 'var(--error-color)',
          },
          breakpoints: {
            s: '1024px',
            m: '1280px',
            l: '1440px',
            xl: '1680px',
            xxl: '1920px',
          },
        },
        rules: [
          [/^shadow-(\d+)$/, ([, d]) => ({ 'box-shadow': `var(--box-shadow${d})` })],
          [
            /^rounded-(normal|small)$/,
            ([, d]) => ({
              'border-radius': `var(--border-radius${d === 'small' ? `-${d}` : ''})`,
            }),
          ],
          [/^bg-var\((.+)\)$/, ([, d]) => ({ 'background-color': `var(${d})` })],
          [/^color-var\((.+)\)$/, ([, d]) => ({ color: `var(${d})` })],
          [/^border-var\((.+)\)$/, ([, d]) => ({ 'border-color': `var(${d})` })],
        ],
        shortcuts: {
          'top-sticky-bar': 'flex items-center h-48px p-x-12px bg-var(--card-color) sticky top-0px z-99 shadow-1',
          section: 'bg-var(--card-color) p-12px',
        },
      }),
    ],
    resolve: {
      alias: {
        '@': resolve('src/renderer/src'),
      },
    },
  },
})
